<template>
	<view v-for="(video, index) in videosAllData">
		<view class="boderStyle" style="margin: 30rpx;" @click="GotoVideoDetil(video)">
			<view style="display: none;">视频ID：{{ video.pk }} </view>
			<view>
				<view class="titleStyle">视频封面:</view>
				<img class="videoCover" :src=video.fields.cover alt="">
			</view>

			<view>
				<span class="titleStyle">标题：</span>
				<span class="content">{{ video.fields.title }}</span>
			</view>
			<view>
				<span class="titleStyle">详情：</span>
				<span class="contentStyle">{{ video.fields.description }}</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				videosAllData: [], //视频的全部数据
			};
		},
		methods: {
			GotoVideoDetil(video) {
				uni.redirectTo({
					url: '/pages/videoDetails/videoDetails?id=' + video.pk
				})
			}
		},

		onLoad() {
			let that = this;
			uni.request({
				url: "http://127.0.0.1:8002/getVideos",
				method: "GET",
				success(res) {
					console.log("全部视频的数据：", res.data.data);
					that.videosAllData = res.data.data;
				},
			});
		}
	};
</script>

<style>
	.boderStyle {
		border: 1px solid #447e9b;
		padding: 10rpx;
	}

	.titleStyle {
		font-size: 30rpx;
		font-weight: 600;
		color: #447e9b;
	}

	.contentStyle {
		font-size: 28rpx;
		color: #447e9b;
	}

	.videoCover {
		width: 100%;
	}
</style>
